<template>
  <div>
    <DetailPanel :dataSource="detailData" :columns="detailColumns" />
    <TableSearch
      ref="timecardTable"
      :columns="timecardTableColumns"
      :tableData="timecardTableData"
      :pagination-display="paginationDisplay"
      @handleTableData="handleTableData"
    >
      <template slot="tableSearchHeader">
        <div class="panel-header">时长卡规格列表</div>
        <el-button
          type="primary"
          icon="el-icon-plus"
          class="table-outside-btn"
          v-if="timeCardTableBtn"
          @click="handleTimeCardTable"
          >发卡详情</el-button
        >
      </template>
    </TableSearch>
    <TableSearch
      ref="stationTable"
      :columns="stationTableColumns"
      :tableData="stationTableData"
      :pagination-display="paginationDisplay"
    >
      <template slot="tableSearchHeader">
        <div class="panel-header">参与电站列表</div>
      </template>
    </TableSearch>
    <TimeCardTable :visible.sync="timeCardTableVisible" />
  </div>
</template>
<script>
import DetailPanel from '@/components/DetailPanel'
import TableSearch from '@/components/TableSearch'
import TimeCardTable from './components/TimeCardTable'
import { selectExternalActivityDetail } from '@/api/activity'
import { typeMap } from '@/utils/format'
import dayjs from 'dayjs'

export default {
  name: 'ExternalActivityDetail',
  components: { DetailPanel, TableSearch, TimeCardTable },
  data() {
    return {
      timeCardTableVisible: false,
      detailData: {},
      detailColumns: [
        {
          label: '活动ID',
          value: 'id',
        },
        {
          label: '活动名称',
          value: 'actName',
        },
        {
          label: '活动描述',
          value: 'actDescription',
        },
        {
          label: '开始时间',
          value: 'actStartTime',
          formatter: () => {
            return dayjs(this.detailData.actStartTime).format(
              'YYYY-MM-DD HH:mm:ss'
            )
          },
        },
        {
          label: '结束时间',
          value: 'actEndTime',
          formatter: () => {
            return dayjs(this.detailData.actEndTime).format(
              'YYYY-MM-DD HH:mm:ss'
            )
          },
        },
        {
          label: '领取失败提示',
          value: 'failMessage',
          ifRender: (data) => {
            return data.exActType === 1
          },
        },
        {
          label: '外部代理商唯一标识',
          value: 'exMchId',
        },
        {
          label: '外部代理商信息',
          value: 'exMchName',
        },
        {
          label: '联系方式',
          value: 'exMchMobile',
        },

        {
          label: '时长卡类型',
          value: 'timeCardType',
          formatter: (data) => {
            return typeMap.externalTimeCardType[data.timeCardType]
          },
          ifRender: (data) => {
            return data.exActType === 1
          },
        },
        {
          label: 'APPID',
          value: 'appid',
        },
        {
          label: '活动代理商',
          value: 'actMchName',
        },
        {
          label: '状态',
          value: 'actStatus',
          formatter: (data) => {
            return typeMap.actStatus[data.actStatus]
          },
        },
        {
          label: '推送领取失败信息',
          value: 'pushFailMessage',
          formatter: (data) => {
            return typeMap.pushFailMessage[data.pushFailMessage]
          },
          ifRender: (data) => {
            return data.exActType === 1
          },
        },
        {
          label: '第三方平台查询用户接口url',
          value: 'queryUserUrl',
          ifRender: (data) => {
            return data.exActType === 1
          },
        },
        {
          label: '第三方平台推送时长卡状态接口url',
          value: 'pushTimecardStatusUrl',
          ifRender: (data) => {
            return data.exActType === 1
          },
        },
        {
          label: '第三方平台【查看更多】按钮url',
          value: 'showMoreUrl',
          ifRender: (data) => {
            return data.exActType === 1
          },
        },
      ],
      paginationDisplay: false,
      timecardTableColumns: [
        {
          label: '时长卡时长（小时）',
          prop: 'timeCardDuration',
        },
        {
          label: '有效期(天)',
          prop: 'timeCardLimit',
        },
        {
          label: '总价值（元）',
          prop: 'timeCardMoney',
        },
        {
          label: '平台分成（元）',
          prop: 'timeCardPlatformMoney',
        },
        {
          label: '代理商分成（元）',
          prop: 'timeCardAgentMoney',
        },
      ],
      timecardTableData: {},
      stationTableData: {},
      stationTableColumns: [
        {
          label: '电站名',
          prop: 'stationName',
          // resourceId:
          //   '/web/activity-management/activityList-management/activityDetail-management/电站名',//todo
        },
      ],
    }
  },
  computed: {
    resourceSet() {
      return this.$store.getters.resourceSet
    },
    timeCardTableBtn() {
      return this.resourceSet.includes(
        '/web/activity-management/externalActivity-management/detail/发卡详情'
      )
    },
  },
  methods: {
    handleTimeCardTable() {
      this.timeCardTableVisible = true
    },
    handleTableData(params) {
      params.id = parseInt(this.$route.params.exActId)
      selectExternalActivityDetail(params).then((res) => {
        this.detailData = res
        this.stationTableData = {
          list: this.detailData.stations,
          totalCount: this.detailData.stations.length,
        }
        if (this.detailData.specification) {
          let timeCardArr = this.detailData.specification.split(';')
          let tmpArr = []
          timeCardArr.forEach((item) => {
            let timeCard = item.split(',')
            tmpArr.push({
              timeCardDuration: timeCard[0],
              timeCardLimit: timeCard[1] ? timeCard[1] : '无限',
              timeCardMoney: timeCard[2],
              timeCardPlatformMoney: timeCard[3],
              timeCardAgentMoney: timeCard[4],
            })
          })
          this.timecardTableData = {
            list: tmpArr,
            totalCount: tmpArr.length,
          }
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.detail-wrapper {
  margin-bottom: 16px;
}
.table-outside-btn {
  float: right;
  margin-bottom: 10px;
}
</style>
